<template>
  <div class="ratings">
    <h1>提交评论</h1>
    <textarea name="" id="" cols="30" rows="5" ref="text"></textarea>
    <mt-button type="primary" @click="sendtext()">提交评论</mt-button>
    <h2>评论列表</h2>
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10" class="detail">
        <li v-for="item in ratings">
          <p>{{item.content}}</p>
          <div>
            <span>{{item.user_name}}</span>
            <span>{{item.add_time | timefmt}}</span>
          </div>
        </li>
      </ul>
      <mt-spinner type="snake" v-show="show" class="zhuan"></mt-spinner>


  </div>
</template>
<script>
  import {Toast} from 'mint-ui';
  import common from '../common/common.js';
  import { InfiniteScroll } from 'mint-ui';
  export default{
    props: [
      'newsid',
      'gundong'
    ],
    data(){
      return {
        ratings: [],
        page: 1,
        show:false
      }
    },
    methods: {
      sendtext(){
        console.log(123);
        let url = common.apiUrl + '/api/postcomment/' + this.newsid;
        let text = this.$refs.text.value;
        if (!text) {
          Toast('请输入内容');
          return;
        }
        this.$http.post(url, {content: text}, {emulateJSON: true}).then(res => {
          if (res.body.status == 0) {
            Toast(res.body.message);
            this.$refs.text.value = "";
            this.gettext();
            console.log('post');
          }
        });
      },
      gettext(page){
        let url = common.apiUrl + '/api/getcomments/' + this.newsid + '?pageindex=' + page;
        this.$http.get(url).then(res => {
          if (res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          if (res.body.message.length<1){
              return
          }
          this.ratings=this.ratings.concat(res.body.message) ;
          console.log(this.ratings);
        })
      },
      loadMore() {
        this.show = true;
        setTimeout(() => {
          this.page++;
          this.gettext(this.page);
          this.show = false;
        }, 4000);
      }
    },
    created(){
      this.gettext(this.page);
    }

  }
</script>
<style scoped>
  .ratings {
    width: 100%;
    padding: 10px;
  }

  .mint-button--normal {
    width: 100%;
  }

  .detail {
    font-size: 10px;
    color: rgba(0, 0, 0, .2);
    list-style: none;
  }

  .detail p {
    margin-bottom: 0px;
    line-height: 16px;
    font-size: 16px;
    color: rgba(0, 0, 0, .8);
  }

  .detail li {
    margin-top: 10px;
  }

  h2 {
    color: rgba(0, 0, 0, .8);
    text-align: center;
    margin-top: 10px;
  }
  .zhuan{
    text-align: center;
    margin: 0 auto;
  }
  .mint-spinner-snake{
    margin: 0 auto;
  }
</style>

